<template>
	<view class="chat-input-container">
		<view class="chat-input-wrapper">
			<view class="chat-input">
				<uni-easyinput type="textarea" v-model="command" placeholder="请输入命令">
				</uni-easyinput>
			</view>
			<view class="chat-btn">
				<uni-row>
					<uni-col :span="8">
						<button size="mini"  @click="()=>{showTools=!showTools;}" style="width:100%">
							设置<uni-icons type="plus"></uni-icons>
						</button>
					</uni-col>
					<uni-col :span="8">
						<button size="mini"  @click="()=>crc(command)" style="width:100%">
							校验<uni-icons type="star"></uni-icons>
						</button>
					</uni-col>
					<uni-col :span="8">
						<button size="mini"  @click="()=>send(command)" style="width:100%">
							发送<uni-icons type="paperplane"></uni-icons>
						</button>
					</uni-col>
				</uni-row>
			</view>
		</view>
		<view  v-show="showTools">
			<uni-segmented-control 
			:current="activeTabIdx" 
			:values="tabs" 
			@clickItem="(e)=>{activeTabIdx = e.currentIndex;}"
			activeColor="#ff6a00"
			styleType="text">
			</uni-segmented-control>
			<view class="content">
				<view v-show="activeTabIdx === 0">	
					<!-- <uni-table border stripe>
						<uni-tr>
							<uni-td width="50">编码</uni-td>
							<uni-td>
								<uni-data-checkbox v-model="options.encoding" :localdata="listEncoding"></uni-data-checkbox>
							</uni-td>
						</uni-tr>
						<uni-tr>
							<uni-td>模式</uni-td>
							<uni-td>		
								<uni-data-checkbox v-model="options.sendMod" :localdata="sendMods"></uni-data-checkbox>
								<view class="uni-list">
									-- <view class="uni-list-cell uni-list-cell-pd">
										<view class="uni-list-cell-db"></view>
										<uni-data-checkbox v-model="options.sendMod" :localdata="sendMods"></uni-data-checkbox>
									</view> --
									<view class="uni-list-cell uni-list-cell-pd"  v-if="options.sendMod == 'auto'">
										<view class="uni-list-cell-db">发送间隔(ms)</view>
										<uni-number-box  v-model="options.autoInterval"></uni-number-box>
									</view>
								</view>		
							</uni-td>
						</uni-tr>
						<uni-tr>
							<uni-td>等待</uni-td>
							<uni-td>
								<view class="uni-list">
									<view class="uni-list-cell uni-list-cell-pd">
										<view class="uni-list-cell-db">收到回答后发送下一帧 </view>
										<switch :checked="options.isWaitAnswer" @change="(e)=>{options.isWaitAnswer=e.detail.value;}" style="transform:scale(0.7)"/>
									</view>	
									<view class="uni-list-cell uni-list-cell-pd" v-if="options.isWaitAnswer">
										<view class="uni-list-cell-db">超时时间(秒)</view>
										<uni-number-box v-model="options.waitAnswerExpirse"></uni-number-box>
									</view>
									<view class="uni-list-cell uni-list-cell-pd"  v-if="options.isWaitAnswer">
										<view class="uni-list-cell-db">重发次数</view>
										<uni-number-box  v-model="options.waitAnswerExpirseReply"></uni-number-box>
									</view>
								</view>															
							</uni-td>
						</uni-tr>
						<uni-tr>
							<uni-td>命令</uni-td>
							<uni-td>
								<view class="uni-list">
									<view :key="item.Idx" class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in options.commands">
										<view class="uni-list-cell-db">
											{{item.Idx}}:{{item.command}} 
											<uni-tag :inverted="true" :text="`${item.devType}/${item.Name}`" type="primary" />
										</view>
										<uni-icons type="right" @click="openCommandsActions(item,index)"></uni-icons>
									</view>
									<view class="uni-list-cell uni-list-cell-pd" style="padding:5px 5px">
										<view class="uni-list-cell-db">
											添加命令
										</view>
										<uni-icons type="plus" color="#ff6a00"></uni-icons>
									</view>
								</view>
							</uni-td>
						</uni-tr>
					</uni-table>	 -->				
				<input-settings-vue ref="inputSettingsVueRef" :options="options"  @onUpdate="(prop,v)=>{options[prop]=v;}"></input-settings-vue>
				</view>
				<view v-show="activeTabIdx === 1">
					<device-type ref="deviceTypeRef"></device-type>
				</view>
				<view v-show="activeTabIdx === 2">
					选项卡3的内容
				</view>
				<view v-show="activeTabIdx === 3">
					选项卡4的内容
				</view>
			</view>			
		</view>
	</view>
</template>

<script setup>
	import { ref,defineEmits, reactive } from 'vue'
	import inputSettingsVue from './inputSettings.vue';
	import deviceType from '../deviceType/index.vue'
	
	import CRC from '../../libs/crc16.js'
	const command=ref('')
	const showTools=ref(false)
	const options=reactive({
		encoding:'HEX',
		sendMod:'manually',
		autoInterval:500,
		isWaitAnswer:false,
		waitAnswerExpirse:5,
		waitAnswerExpirseReply:1,
		commands:[
			{Idx:0,devType:'温湿度',Name:'获取温湿度',command:'01 02 03 05 06 BC 01 02 03 05 06 BC 01 02 03 05 06 BC',encoding:'hex'},
			{Idx:1,devType:'温湿度',Name:'获取温湿度',command:'01 02 03 05 06 BC 01 02 03 05 06 BC 01 02 03 05 06 BC',encoding:'hex'},
			{Idx:2,devType:'温湿度',Name:'获取温湿度',command:'01 02 03 05 06 BC 01 02 03 05 06 BC 01 02 03 05 06 BC',encoding:'hex'},
			{Idx:3,devType:'温湿度',Name:'获取温湿度',command:'01 02 03 05 06 BC 01 02 03 05 06 BC 01 02 03 05 06 BC',encoding:'hex'},
			{Idx:4,devType:'温湿度',Name:'获取温湿度',command:'01 02 03 05 06 BC 01 02 03 05 06 BC 01 02 03 05 06 BC',encoding:'hex'}
		]
	})
	
	const emit = defineEmits(['onSend'])
	const tabs=["发送设置","设备命令","历史命令","Modbus助手"];
	const activeTabIdx=ref(0);	
		
	const send = (v)=>{
		console.log('v',v)
		if(v && v.length>0){
			emit('onSend',v);
		}
	}
	
	const crc = (v)=>{
		var toModbusCRC16 = CRC.ToModbusCRC16(v);
		
		console.log(`toModbusCRC16_true=>${CRC.ToModbusCRC16(v,true)},toModbusCRC16_true=>${CRC.ToModbusCRC16(v)}`);
	}
</script>

<style>
	.chat-input-container{
		/* position:fixed;
		bottom:0; */
		width:100%;
		background:#e9e9eb;
		padding: 0;
	}
	
	.chat-input-wrapper{		
		padding: 5px;
		border-bottom: 1px solid #dedfe0;
	}	
	
	.chat-input{
		display: inline-block;
		width:100%;
		height:100%;
		padding: 0;
		margin: 0;
	}
	
	.chat-btn{
		display: inline-block;
		width:100%;
		padding: 0;
		margin: 0;
		text-align: center;
		vertical-align: middle;
	}
	
	.uni-list {
	    position: relative;
	    width: 100%;
	    display: flex;
	    flex-direction: column;
	}
	
	
	.uni-list-cell {
	    position: relative;
	    display: flex;
	    flex-direction: row;
	    justify-content: space-between;
	    align-items: center;
		border-bottom: 1px solid #EBEEF5;
	}
	
	.uni-list 	.uni-list-cell:last-child{
		border-bottom: none;
	}
	
	.uni-list-cell-pd {
	    padding:10px 5px;
	}
</style>